<template>
	<view>
		<image class="img-bg" src="https://nmlwx.sowreap.cn/nongmuWeChatImage/static/images/recruit/img-bg.png"
			mode="widthFix"></image>
		<view class="page-wrap">
			<!-- 背景上的内容 -->
			<view class="u-p-40">
				<view class="u-font-40 blod">
					{{ dataList.title }} {{ dataList.category.title }}
					<!-- 胡营急招肥料农资销售业务员 -->
				</view>
				<view class="green u-font-32 blod u-m-t-20">{{ dataList.salary }}</view>
				<div class="u-flex prop-wrap u-m-t-20">
					<image src="https://nmlwx.sowreap.cn/nongmuWeChatImage/static/images/recruit/icon-add2.png"
						mode="widthFix"></image>
					<text>{{ dataList.area }}</text>
					<image src="https://nmlwx.sowreap.cn/nongmuWeChatImage/static/images/recruit/icon-jy.png"
						mode="widthFix"></image>
					<text>{{dataList.experience == '' ? '经验不限' : ('经验' + dataList.experience + '年')}}</text>
					<image src="https://nmlwx.sowreap.cn/nongmuWeChatImage/static/images/recruit/icon-xl.png"
						mode="widthFix"></image>
					<text> {{ dataList.education == '' ? '学历不限' : dataList.education}} </text>
				</div>
				<view class="u-font-22 u-tips-color u-m-t-20">
					更新：{{ dataList.update_time }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;浏览次数：{{ dataList.show_count }}
				</view>
			</view>
			<view class="page-content">
				<!-- 公司logo 经理 名称等 -->
				<div class="u-flex">
					<u-image src="https://nmlwx.sowreap.cn/nongmuWeChatImage/static/images/recruit/company-logo.png"
						width="120rpx" height="120rpx"></u-image>
					<div class="u-flex-1 u-m-l-20">
						<view class="u-font-28 blod">
							{{ dataList.company.principal_name }}
						</view>
						<view class="u-font-28 u-tips-color u-m-t-10">
							{{ dataList.company.name }}
						</view>
					</div>
				<!-- 	<image class="icon-msg"
						src="https://nmlwx.sowreap.cn/nongmuWeChatImage/static/images/recruit/icon-msg.png"
						mode="widthFix"></image> -->
				</div>
				<!-- 职位福利 -->
				<view class="u-font-32 blod u-m-t-50">
					职位福利
				</view>
				<div class="welfare-wrap">
					<text v-for="(item,index) in dataList.tag" :key="index">{{item}}</text>
				</div>
				<!-- 岗位要求 -->
				<view class="u-font-32 blod u-m-t-50">
					岗位要求
				</view>
				<div class="u-m-t-20 u-flex u-col-top u-font-28 u-content-color">
					<text>工作内容：</text>
					<text>{{ dataList.content }}</text>
				</div>
				<!-- <div class="u-flex u-col-top u-font-28 u-content-color u-m-t-10">
					<text>薪资待遇：</text>
					<text>底薪3000+提成8%+五险+餐厅+各种补助,
						每月四天休班，国家法定节假日带薪休班，
						有五险</text>
				</div> -->
				<!-- 工作地址 -->
				<view class="u-font-32 blod u-m-t-50">
					工作地址
				</view>
				<div class="u-flex u-font-28 u-content-color u-m-t-10">
					<image class="icon-add"
						src="https://nmlwx.sowreap.cn/nongmuWeChatImage/static/images/recruit/icon-add.png"
						mode="widthFix"></image>
					<text>{{ dataList.address }}</text>
				</div>
				<div class="btn-map u-m-t-20">查看地图</div>
			</view>
			<!-- 公司 -->
			<navigator :url="`/pages/recruit/company?type=job&company_id=${dataList.company.company_id}`"
				class="company-wrap u-flex">
				<u-image class="img-border" border-radius="10"
					src="https://nmlwx.sowreap.cn/nongmuWeChatImage/static/images/recruit/company-logo.png"
					width="120rpx" height="120rpx"></u-image>
				<div class="u-flex-1 u-m-l-20">
					<view class="u-font-28 blod">
						{{ dataList.company.name }}
					</view>
					<view class="u-font-28 u-tips-color u-m-t-10">
						<!-- 20-50人·农业、畜牧 -->
					</view>
				</div>
				<u-icon name="arrow-right"></u-icon>
			</navigator>
			<!-- 底部操作栏 -->
			<div class="footer-wrap">
				<div class="fixed-wrap u-flex u-row-between">
					<navigator url="/pages/recruit/index" class="u-flex u-flex-col">
						<image class="img"
							src="https://nmlwx.sowreap.cn/nongmuWeChatImage/static/images/recruit/icon-home.png"
							mode="widthFix"></image>
						<text class="u-font-24">首页</text>
					</navigator>
					<div class="u-flex u-flex-col u-m-l-50" @click="concat">
						<image class="img"
							src="https://nmlwx.sowreap.cn/nongmuWeChatImage/static/images/recruit/icon-tel.png"
							mode="widthFix"></image>
						<text class="u-font-24">电话</text>
					</div>
					<!-- <div class="btn btn-online u-m-l-60">在线聊</div> -->
					<div class="btn btn-apply u-m-l-20" @click="applyRecruit">申请职位</div>
				</div>
			</div>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				welfareList: [
					"五险", "年底双薪", "加班补助", "话补", "节日福利", "年终奖", "免费培训", "晋升空间"
				],

				dataList: {},
				job_id: ''
			}
		},
		onLoad(options) {
			if (options.job_id) {
				this.job_id = options.job_id
				// 岗位详情
				this.get_recruit_jobDetails(options.job_id);
			}
		},
		methods: {
			// 打电话
			concat(){
				const phoneNumber = this.dataList.company.mobile; // 替换为你需要拨打的电话号码
				      uni.makePhoneCall({
				        phoneNumber: phoneNumber,
				        success: () => {
				          console.log('拨号成功');
				        },
				        fail: (err) => {
				          console.error('拨号失败', err);
				        }
				      });
			},
			// 岗位详情
			get_recruit_jobDetails(job_id) {
				uni.showLoading({
					title: '加载中...'
				});
				this.$http({
					url: this.api.recruit_jobDetails,
					method: 'GET',
					data: {
						job_id
					}
				}).then(res => {
					if (res.code == 1) {
						uni.hideLoading();
						this.dataList = res.data
					}
				})
			},

			// 申请岗位
			get_recruit_applyRecruit(job_id) {
				uni.showLoading({
					title: '加载中...'
				});
				this.$http({
					url: this.api.recruit_applyRecruit,
					method: 'POST',
					data: {
						job_id
					}
				}).then(res => {
					if (res.code == 1) {
						uni.hideLoading();
						uni.showToast({
							icon: 'success',
							title: "申请成功!",
							duration: 2000
						})
					}
				})
			},

			// 申请职位按钮
			applyRecruit() {
				// 申请岗位
				this.get_recruit_applyRecruit(this.job_id)
			},
		}
	}
</script>

<style scoped lang="scss">
	.img-bg {
		position: absolute;
		left: 0;
		top: 0;
		width: 750rpx;
		height: 500;
		z-index: 0;
	}

	.page-wrap {
		position: relative;
		z-index: 1;
	}

	.page-content {
		background: #FFFFFF;
		border-radius: 60rpx 60rpx 0px 0px;
		margin-top: 30rpx;
		padding: 30rpx;
		padding-top: 40rpx;
	}

	.icon-msg {
		width: 80rpx;
		height: 80rpx;
	}

	.icon-add {
		width: 48rpx;
		height: 48rpx;
		margin-right: 16rpx;
	}

	.btn-map {
		width: 160rpx;
		height: 44rpx;
		background: #E6F8EE;
		border: 1px solid rgba(7, 193, 96, 0.2);
		border-radius: 20rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #07C160;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.company-wrap {
		border-top: 1px solid #DDDDDD;
		width: 750rpx;
		padding: 30rpx;
		background: #fff;
		box-sizing: border-box;

		.img-border {
			border: 1px solid #DDDDDD;
			border-radius: 10rpx;
		}
	}

	.welfare-wrap {
		display: flex;
		flex-wrap: wrap;

		text {
			margin-top: 20rpx;
			margin-right: 20rpx;
			padding: 8rpx 12rpx;
			background: #F3F3F3;
			border-radius: 4rpx;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #999999;
		}

	}

	.prop-wrap {
		image {
			width: 24rpx;
			height: 24rpx;
			margin-right: 10rpx;
		}

		text {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #999999;
			margin-right: 60rpx;
		}
	}

	.footer-wrap {
		width: 750px;
		height: 120rpx;
		position: relative;

		.img {
			width: 42rpx;
			height: 42rpx;
			margin-bottom: 10rpx;
		}

		.fixed-wrap {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 750rpx;
			height: 120rpx;
			background: #FFFFFF;
			padding: 0 20rpx;
			z-index: 9;



			.btn {
				width: 240rpx;
				height: 80rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: bold;
			}

			.btn-online {
				background: #E6F8EE;
				border: 1px solid rgba(7, 193, 96, 0.2);
				border-radius: 10rpx;
				color: #07C160;
			}

			.btn-apply {
				background: #07C160;
				color: #FFFFFF;
			}
		}
	}
</style>
<style>
	page {
		padding: 0;
		padding-bottom: 10rpx;
	}
</style>